import {useCallback, useEffect, useRef, useState, forwardRef} from "react";

function TestInput(props, parentRef) {
  // const [inputDomElement, setInputElement] = useState(null);
  const inputElementRef = useRef(null);
  const divElementRef = useRef(null);

  // 设计理念： 就是react 始终希望组件的props是纯净的， 属性一旦发生变化 就会造成组件的重新渲染
  // 但是我们知道ref的变动 是不会造成组件的重新渲染的
  // 其实我们要避免的是一个东西的不确定性，我们应该尽量去保证一个东西的稳定性


  console.log("Text input渲染")
  useEffect(() => {
    // parentRef.current = 1;
    console.log("eeeee", parentRef.current)
  }, [])

  // useEffect(() => {
  //   // 这个真实dom和react他有没有任何关系
  //   inputElementRef.current = document.getElementsByClassName("input-example")[0];
  //   //  setInputElement(inputExampleElement); // 设置进去的目的是在其他地方可以访问这个真实dom
  // }, [])


  // forwardRef
  // react 强大且复杂


  // 既然我可以通过document.xx getByElementById 直接拿到真实dom 那useRef存在的意义是什么
  // 1. useRef 构建一个状态出来，这个状态是直接脱离react控制的， 他的变化也不会造成重新渲染， 同时状态还不会因为组件的重新渲染而被初始化
  // 2. 如果不使用useRef去处理真实Dom, 会出现什么问题？
  // 不用Ref就要构造状态， 而使用状态会造成没必要的重新渲染
  // 用全局变量又会造成闭包问题
  const handleInput = useCallback(() => {
    console.log("用户对应的输入事件触发")
  }, [])
  const handlerClick = useCallback(() => {
    // 获取真实dom
    // inputElementRef.current.focus();
    for (let i = 0; i < 50000; i++) {
      console.log(2222)
    }
  }, [])
  return (
    <div ref={divElementRef}>
      {/*拿到input 的真实dom 去调用dom上的focus方法*/}
      {/* 它使用了useEffect 帮你获取真实dom并且赋值*/}
      <input onChange={handleInput} className='input-example'/>
      <button onClick={handlerClick}>click me</button>
    </div>
  )
}

export default forwardRef(TestInput);

// 给自组件挂ref 是要求给自组件去追加forwardRef的， 同时forwardRef会将得到的这个ref属性通过第二个参数传递给真实的函数组件

// function forwardRef(Component) {
//   return function (props) {
//     const {ref, ...realProps} = props;
//     return Component(realProps, ref);
//   }
// }